<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('文件上传')"/>
    <th:block th:include="include :: viewer-css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #dowebok {
            width: 700px;
            margin: 0 auto;
            font-size: 0;
        }

        #dowebok li {
            display: inline-block;
            width: 32%;
            margin-left: 1%;
            padding-top: 1%;
        }

        #dowebok li img {
            width: 100%;
        }
    </style>
</head>
<body class="gray-bg">
<div align="center">
    <h3>图片类</h3>
    <ul id="dowebok" th:with="type=${docList}">
        <li th:each="doc : ${type}" th:if="${doc.fileType}!='docx'
                        and ${doc.fileType}!='doc'
                        and ${doc.fileType}!='xlsx'
                        and ${doc.fileType}!='xls'
                        and ${doc.fileType}!='pdf'">
            <p>[[${doc.fileName}]]</p>
            <img width="100" height="100"
                 th:data-original="@{${doc.fileUrl}}"
                 th:src="@{${doc.fileUrl}}"
                 th:alt="${doc.fileName}">
        </li>
    </ul>
    <h3>文档类</h3>
    <ul th:with="type=${docList}">
        <li th:each="doc : ${type}" th:if="${doc.fileType}=='docx'
                        or ${doc.fileType}=='doc'">
            <img width="80" th:url="@{${doc.fileUrl}}" th:name="${doc.fileName}" th:fileType="${doc.fileType}"
                 height="80"
                 th:src="@{/img/word.jpg}"
                 th:alt="${doc.fileName}" onclick="downLoad(this)">
            <p>[[${doc.fileName}]]</p>
        </li>
        <li th:each="doc : ${type}" th:if="${doc.fileType}=='xlsx'
                        or ${doc.fileType}=='xls'">
            <img width="80" th:url="@{${doc.fileUrl}}" th:name="${doc.fileName}" th:fileType="${doc.fileType}"
                 height="80"
                 th:src="@{/img/excel.jpg}"
                 th:alt="${doc.fileName}" onclick="downLoad(this)">
            <p>[[${doc.fileName}]]</p>
        </li>
        <li th:each="doc : ${type}" th:if="${doc.fileType}=='pdf'">
            <img width="80" th:url="@{${doc.fileUrl}}" th:name="${doc.fileName}" th:fileType="${doc.fileType}"
                 height="80"
                 th:src="@{/img/pdf.jpg}"
                 th:alt="${doc.fileName}" onclick="openWindow(this)">
            <p>[[${doc.fileName}]]</p>
        </li>
    </ul>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: viewer-js"/>
<script th:inline="javascript">
    $(function () {
        $('#dowebok').viewer({
            url: 'data-original',
        });
    });

    function submitHandler(index, layero) {
        $.modal.close();
    }

    function downLoad(obj) {
        var fileUrl = $(obj).attr("url");
        var fileName = $(obj).attr("name");
        var fileType = $(obj).attr("fileType");
        window.location.href = ctx + "busiflw/docReg/download?fileUrl=" + encodeURI(fileUrl) + "&fileName=" + encodeURI(fileName) + "&fileType=" + encodeURI(fileType);
    }

    function openWindow(obj) {
        var fileUrl = $(obj).attr("url");
        var fileName = $(obj).attr("name");
        window.open(fileUrl, fileName);
    }
</script>
</body>
</html>
